<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_area" placeholder='区域'
            condition="f_area like '%{}%'" v-next-el='area'  v-el:userinfo
            :size="model.f_area ? model.f_area.length * 2 : 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_slice_area" placeholder='片区'
            condition="f_slice_area like '%{}%'" v-next-el='slice'
            :size="model.f_slice_area ? model.f_slice_area.length * 2 : 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_street" placeholder='街道'
            condition="f_street like '%{}%'" v-next-el='street' v-el:username
            :size="model.f_street ? model.f_street.length * 2 : 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_residential_area" placeholder='小区'
            condition="f_residential_area like '%{}%'"  v-next-el='residential'  v-el:userphone
            :size="model.f_residential_area ? model.f_residential_area.length * 2 : 4">
          </div>
          <div class="form-group">
              <input  type="text" class="form-control" v-model="model.f_building" placeholder='楼号'
              condition="f_building = '{}'" v-next-el='building' v-el:meternumber
              :size="model.f_building ? model.f_building.length * 2 : 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_unit" placeholder='单元号'
            condition="f_unit = '{}'" v-next-el='unit' v-el:user
            :size="model.f_unit ? model.f_unit.length * 2 : 4">
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
          </div>
        </div>
       </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
             <th>序号</th>
             <th>用户编号</th>
			       <th>用户姓名</th>
             <th>用户状态</th>
             <th>用户电话</th>
             <th>用户地址</th>
             <th>合同编号</th>
             <th>用户类型</th>
             <th>用气性质</th>
             <th>建档日期</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{$index+1}}</td>
          <td style="text-align: center;">{{row.f_userinfo_id}}</td>
          <td style="text-align: center;">{{row.f_user_name}}</td>
          <td style="text-align: center;">{{row.f_user_state}}</td>
          <td style="text-align: center;">{{row.f_user_phone}}</td>
          <td style="text-align: center;">{{row.f_address}}</td>
          <td style="text-align: center;">{{row.f_contract_id}}</td>
          <td style="text-align: center;">{{row.f_user_type}}</td>
          <td style="text-align: center;">{{row.f_gasproperties}}</td>
          <td style="text-align: center;">{{row.f_createfile_date}}</td>
        </template>
      </data-grid>
 </criteria-paged>
  <div>
    <div class="auto">
      <label for="f_title"  class=" col-sm-2 control-label">标题</label>
      <div class="col-sm-1" id="f_title">
        <v-select id="f_title"
          v-model="f_title"
          placeholder='请选择'
          :value.sync="f_title"
          :options='title'
          close-on-select>
        </v-select>
      </div>
      <label for="f_stop_date"  class=" col-sm-2 control-label">停气时间</label>
      <div class="col-sm-2">
        <datepicker id="f_stop_date"
          placeholder="停气时间"
          v-model="row.f_stop_date"
          :value.sync="row.f_stop_date"
          :format="'yyyy-MM-dd HH:mm:ss'"
          width="100%">
        </datepicker>
      </div>
      <label for="f_start_date"  class=" col-sm-2 control-label">来气时间</label>
      <div class="col-sm-2">
        <datepicker id="f_start_date"
          placeholder="来气时间"
          v-model="row.f_start_date"
          :value.sync="row.f_start_date"
          :format="'yyyy-MM-dd HH:mm:ss'"
          width="100%">
        </datepicker>
      </div>
      <div style="padding-top:50px">
        <label for="f_user_type"  class=" col-sm-2 control-label">内容</label>
        <textarea class="form-control col-sm-8" v-model="model.f_content" style="width:800px; height:150px" placeholder=""></textarea>
      </div>
    </div>
    <div style="text-align:right;height:auto;margin-top:170px;margin-right:50px;">
      <button class="btn btn-success width-60" @click="confirm()">保存
      </button>
      <button class="btn btn-default width-60" @click="clear()">取消
      </button>
    </div>
  </div>
</div>
</template>

<script>
import co from 'co'
import { PagedList } from 'vue-client'
import * as Util from '../Util'
import * as AppData from '../AppData'
// import AppData from '../../stores/AppData'
let savenotification = function * (self){
  // console.log(self.model);
  for (let i = 1; i <= self.model.totalPage; i++){
    yield self.model.loadPage(i)
      for (let j=0; j<self.model.rows.length; j++){
        self.model.rows[j].f_userinfo_id=`${self.model.rows[j].f_userinfo_id}`
        self.user.push(self.model.rows[j])
      }
    }
  yield self.$post('rs/logic/savenotification', {data:{user:self.user,f_title:self.f_title,f_content:self.model.f_content,f_stop_date:self.row.f_stop_date,
  f_start_date:self.row.f_start_date,f_operate_date:self.row.f_operate_date,f_operator:Util.f.name}},
  {resolveMsg: null, rejectMsg: null})
  .then ((res)=> {
    self.user = []
    self.$showMessage('保存成功')
  })
  .catch ((res)=> {
    self.$showMessage('请确认信息填写完整')
  })
}
export default {
  title: '欠费用户',
  data () {
    return {
      model: new PagedList('rs/sql/getnotification', 50, {}, {f_userinfo_id: ''}),
      row: {
        f_stop_date:'',
        f_start_date:'',
        f_operate_date:Util.toStandardTimeString(),
        f_content:'',
        f_operator:''
      },
      user:[],
      title: [  {label: '停气通知', value: '停气通知'},
                {label: '安检通知', value: '安检通知'}]
    }
  },
  props: {

  },
  ready () {
    this.search()
  },
  methods: {
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    confirm () {
      let gen = savenotification(this)
      return co(gen)
    },
    clear () {

    }
  }
}
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
</style>
